@use "sass:math";
@import "./m.reset";
@import "../utils/iconfont.css";

@function getvw($w) {
    @return math.div($w, 750) * 100+vw;
}

a:link {
    color: #000;
}

a:visited {
    color: #000;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

body {
    width: getvw(750);

    header {
        width: 100%;

        // 顶部导航栏
        nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: getvw(16) getvw(22) 0;

            // logo样式
            .logoBox {
                width: getvw(123);

                img {
                    width: 100%;
                }
            }

            // 搜索样式
            .searchBox {
                width: getvw(265);
                height: getvw(50);
                position: relative;

                input {
                    width: 100%;
                    height: 100%;
                    border-radius: getvw(25);
                    border: getvw(2) solid #ff9344;
                    font-size: getvw(24);
                    padding-left: getvw(25);
                    box-sizing: border-box;
                    outline: none;
                }

                .icon-sousuo {
                    color: #ff9344;
                    font-size: getvw(38);
                    position: absolute;
                    top: getvw(4);
                    right: getvw(15);
                }
            }

            // 下拉框样式
            .selectBox {
                width: getvw(155);
                height: getvw(52);
                position: relative;

                select {
                    width: 100%;
                    height: 100%;
                    border: getvw(2) solid #ff9344;
                    font-size: getvw(26);
                    appearance: none;
                    padding-left: getvw(14);
                    outline: none;
                }

                .drapDown {
                    width: 0;
                    height: 0;
                    display: block;
                    border: getvw(16) solid #ff9344;
                    border-color: #ff9344 transparent transparent;
                    position: absolute;
                    top: getvw(18);
                    right: getvw(10);
                    pointer-events: none;
                }
            }

            // Back样式
            .backBox {
                a {
                    display: block;
                    width: getvw(124);
                    height: getvw(58);
                    border: getvw(2) solid #ff9344;
                    border-radius: getvw(20);
                    text-align: center;
                    line-height: getvw(58);
                }
            }

            // 标题样式
            .titleBox {
                font-weight: 700;
                font-size: getvw(26);
            }

            // 邮箱样式
            .emailBox {
                width: getvw(124);
                position: relative;

                .icon-youxiang {
                    color: #ff9344;
                    font-size: getvw(75);
                    position: absolute;
                    top: - getvw(40);
                    right: 0;
                }

                span {
                    width: getvw(28);
                    height: getvw(28);
                    font-size: getvw(24);
                    text-align: center;
                    color: #fff;
                    background-color: #fa5050;
                    border-radius: 50%;
                    position: absolute;
                    top: - getvw(35);
                    right: getvw(6);
                }
            }

            // 收藏样式
            .collBox {
                width: getvw(124);

                .icon-shoucangjia {
                    color: #ff9344;
                    font-size: getvw(55);
                    float: right;
                }
            }
        }
    }

    main {
        padding: 0 getvw(22);

        .empty {
            height: getvw(122);
        }
    }

    footer {
        width: 100%;
        height: getvw(122);
        background-color: #fff;
        position: fixed;
        bottom: 0;

        ul {
            display: flex;
            justify-content: space-around;
            align-items: center;

            li {
                width: getvw(80);

                a {
                    display: block;
                    width: 100%;
                    text-align: center;
                    font-size: getvw(26);

                    // 首页
                    .icon-shouye1 {
                        font-size: getvw(80);
                        color: #ff9344;
                    }

                    .icon-shouye-xianxing {
                        font-size: getvw(80);
                        color: #ff9344;
                    }

                    .icon-shouye1+span {
                        position: relative;
                        top: (getvw(2));
                    }

                    .icon-shouye-xianxing+span {
                        position: relative;
                        top: (getvw(2));
                    }

                    // 分类
                    .icon-fenleiorguangchangorqita {
                        font-size: getvw(66);
                        color: #ff9344;
                    }

                    .icon-fenleiorguangchangorqitatianchong {
                        font-size: getvw(66);
                        color: #ff9344;
                    }

                    .icon-fenleiorguangchangorqita+span {
                        position: relative;
                        top: (getvw(9));
                    }

                    .icon-fenleiorguangchangorqitatianchong+span {
                        position: relative;
                        top: (getvw(9));
                    }

                    // 发现
                    .icon-hanhan-01-01 {
                        font-size: getvw(72);
                        color: #ff9344;
                    }

                    .icon-faxian {
                        font-size: getvw(72);
                        color: #ff9344;
                    }

                    .icon-faxian+span {
                        position: relative;
                        top: (getvw(5));
                    }

                    .icon-hanhan-01-01+span {
                        position: relative;
                        top: (getvw(5));
                    }

                    // 我的
                    .icon-wode {
                        font-size: getvw(70);
                        color: #ff9344;
                    }

                    .icon-profilec {
                        font-size: getvw(70);
                        color: #ff9344;
                    }

                    .icon-wode+span {
                        position: relative;
                        top: (getvw(7));
                    }

                    .icon-profilec+span {
                        position: relative;
                        top: (getvw(7));
                    }
                }
            }
        }
    }
}